<template>
    <!-- 这是上面图表二的 -->
    <div id="main12"></div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            geYushuJuData: [],//各区设备统计数据
            zaiXian: [],
            tingJi: [],
            guZhang: [],
            suoZaiZhen: []
        };
    },
    methods: {
        // 请求接口，获取数据
        getDataList() {
            this.geYushuJuData.forEach((items) => {
                this.suoZaiZhen.push(items.suozaizhen)
                if (items.zaixiannum == null) {
                    this.zaiXian.push(0)
                } else {
                    this.zaiXian.push(parseFloat(items.zaixiannum))
                }


                if (items.tingjinum == null) {
                    this.tingJi.push(0)
                } else {
                    this.tingJi.push(parseFloat(items.tingjinum))
                }

                if (items.guzhangnum == null) {
                    this.guZhang.push(0)
                } else {
                    this.guZhang.push(parseFloat(items.guzhangnum))
                }
            });
            this.initCharts();
        },
        // 柱状图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main12"));
            // 实现相应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            // 指定图表的配置项和数据
            var option = {
                color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                title: {
                    text: '设备运行状态',
                    textStyle: {
                        fontFamily: 'Arial', // 设置字体样式为 Arial
                        fontSize: 18, // 设置字体大小为 16px
                        color: 'aliceblue' // 设置字体颜色为绿色
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    textStyle: {
                        color: 'aliceblue' // 修改图例文字颜色为红色
                    },
                    data: ['运行', '停机', '故障']
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                grid: {
                    left: '4%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: [...this.suoZaiZhen],
                        axisLine: {
                            lineStyle: {
                                color: 'aliceblue' // 设置 x 轴颜色为红色
                            }
                        },
                        axisLabel: {
                            interval: 0,//横轴信息全部显示
                            rotate: 30,//-15度角倾斜显示
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: 'aliceblue' // 设置 x 轴颜色为红色
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '运行',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(128, 255, 165)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(1, 191, 236)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [...this.zaiXian]
                    },
                    {
                        name: '停机',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(0, 221, 255)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(77, 119, 255)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [...this.tingJi]
                    },
                    {
                        name: '故障',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(55, 162, 255)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(116, 21, 219)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [...this.guZhang]
                    }
                ]
            };
            myChart.setOption(option);
        },
    },
};
</script>
  
<style>
#main12 {
    height: 240px;
    /* width: 510px; */
    /* box-sizing:
        border-box;
    padding: 5px; */
    /* background-color: brown; */
}
</style>
  